<template>
	<view class="newAddress">
		<view class="line">
			<text class="text">姓名</text>
			<input type="text" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人姓名" v-model="realname"/>
		</view>
		<view class="line">
			<text class="text">联系电话</text>
			<input type="number" placeholder-style="font-weight: 400;color:rgba(60,72,104,0.8)" value="" placeholder="请输入联系人电话号码" v-model="mobile"/>
		</view>
		<view class="line">
			<text class="text">所在地区</text>
			
			<picker mode="multiSelector" @columnchange="bindAreaChange" :value="multiIndex" :range="multiArray" range-key="title">
				<view class="uni-input">
				{{isSelArea == 1 ? multiArray[0][multiIndex[0]].title : regionsName}} 
				{{isSelArea == 1 ? multiArray[1][multiIndex[1]].title : ''}} 
				{{isSelArea == 1 ? multiArray[2][multiIndex[2]].title : ''}}</view>
			</picker>
		</view>
		
		<textarea value="address_details" placeholder="请填写详细地址，不少于5个字" v-model="address_details"/>
		<view class="line" style="border-bottom: 12upx rgba(252,252,253,1) solid;">
			<view :class="is_default == 1?'sel':'nosel'" @click="setDefault()"></view>
			<text>设为默认地址</text>
		
		<view class="bottom-new" v-if="id > 0" @click="delAddress()">
		<text>删除</text>
		</view>
		
		</view>
		
		<view class="bottom" @click="save()">保存</view>
	</view>
</template>


<script> 
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		components: {
			//pickRegions
		},
		data() {
			return {
				id : 0,
				realname : '',
				mobile : '',
				province_id : 0,
				city_id : 0,
				area_id: 0,
				regionsName : '请选择',
				address_details: '',
				is_default : 0,
				regions: [],
				areaList: [],
				multiArray: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				isSelArea : 0,
				optionsParam: '',
				formType:0,
			}
		},
		methods: {
			getInfo() {
				if(this.id == 0) {
					this.getProvinceList();
					return ;
				}
				var self = this;
				serve
					.request({
						url: '/member/address/view',
						data: {
							id:self.id,
						}
					})
					.then(res => {
						if(res.code == 200) {
							self.realname = res.data.realname;
							self.mobile = res.data.mobile;
							self.province_id = res.data.province_id;
							self.city_id = res.data.city_id;
							self.area_id = res.data.area_id;
							self.regionsName = res.data.address_name;
							self.address_details = res.data.address_details;
							self.is_default = res.data.is_default;
							self.isSelArea = 1;
							self.getProvinceList();
							self.$forceUpdate();
							// self.multiIndex = [self.province_id, self.city_id, self.area_id];
						} else {
							uni.showToast({
								title:res.message,
							})
						}
					});
			},
			getProvinceList() {
				var self = this;
				serve
					.request({
						url: '/common/provinces/index',
						data: {
							pid : 0
						}
					})
					.then(res => {
						self.multiArray[0] = res.data;
						if(self.province_id > 0) {
							res.data.forEach((item, key) => {
								if(item.id == self.province_id) {
									self.$set(self.multiIndex, 0, key);
									// self.multiIndex[0] = key;
									// self.$forceUpdate();
								}
							});
						} else {
							self.$set(self.multiIndex, 0, 0);
						}
						self.getCityList();
					});
			},
			getCityList() {
				var self = this;
				if(self.province_id == 0) {
					let provinceFirst = self.multiArray[0][0];
					self.province_id = provinceFirst.id;
				}
				serve
					.request({
						url: '/common/provinces/index',
						data: {
							pid : self.province_id
						}
					})
					.then(res => {
						self.multiArray[1] = res.data;
						if(self.city_id > 0) {
							res.data.forEach((item, key) => {
								if(item.id == self.city_id) {
									// self.multiIndex[1] = key;
									self.$set(self.multiIndex, 1, key);
								}
							});
						} else {
							self.$set(self.multiIndex, 1, 0);
						}
						// self.city_id = 0;
						self.multiArray[2] = [];
						self.getAreaList();
					});
			},
			getAreaList() {
				var self = this;
				if(self.city_id == 0) {
					let cityFirst = self.multiArray[1][0];
					self.city_id = cityFirst.id;
				}
				serve
					.request({
						url: '/common/provinces/index',
						data: {
							pid : self.city_id
						}
					})
					.then(res => {
						self.multiArray[2] = res.data;
						if(self.area_id > 0) {
							res.data.forEach((item, key) => {
								if(item.id == self.area_id) {
									// self.multiIndex[2] = key;
									self.$set(self.multiIndex, 2, key);
								}
							});
						} else {
							self.$set(self.multiIndex, 2, 0);
						}
						let areaFirst = self.multiArray[2][0];
						self.area_id = areaFirst.id;
						self.isSelArea = 1;
						self.$forceUpdate();
					});
			},
			bindAreaChange: function(e) {
				this.isSelArea = 1;
				let changeColumn = e.detail.column;
				let selItem = this.multiArray[changeColumn][e.detail.value];
				if(changeColumn == 0) {
					if(this.province_id == selItem.id) {
						return ;
					}
					this.province_id = selItem.id;
					this.city_id = 0;
					this.area_id = 0;
					this.$set(this.multiIndex, 1, 0);
					this.$set(this.multiIndex, 2, 0);
					this.getCityList();
				} else if(changeColumn == 1) {
					if(this.city_id == selItem.id) {
						return ;
					}
					this.city_id = selItem.id;
					this.area_id = 0;
					this.$set(this.multiIndex, 2, 0);
					this.getAreaList();
				} else {
					this.area_id = selItem.id;
				}
				this.multiIndex[changeColumn] = e.detail.value;
				this.$forceUpdate();
				// this.multiIndex = [this.province_id, this.city_id, this.area_id];
			},
			setDefault() {
				this.is_default = this.is_default == 1 ? 0 : 1;
			},
			save() {
				if (this.realname == "") {
					uni.showToast({
						title: "请填写姓名",
						icon: 'none'
					})
					return;
				}
				if (this.mobile == "") {
					uni.showToast({
						title: "请填写联系电话",
						icon: 'none'
					})
					return;
				}
				if (this.isSelArea == 0) {
					uni.showToast({
						title: "请选择地址省市区",
						icon: 'none'
					})
					return;
				}
				if (this.address_details == "") {
					uni.showToast({
						title: "请填写详细地址",
						icon: 'none'
					})
					return;
				}
				var self = this;
				serve
					.request({
						url: '/member/address/update',
						data: {
							id : self.id,
							realname : self.realname,
							mobile : self.mobile,
							province_id : self.province_id,
							city_id : self.city_id,
							area_id : self.area_id,
							//address_name : self.address_name,
							address_details : self.address_details,
							is_default : self.is_default,
						}
					})
					.then(res => {
						
						if (res.code == 200) {
							uni.showToast({
								title: self.id > 0 ? '修改成功' : '新增成功',
								icon: 'none',
								success() {
									setTimeout(function () {
										var pages = getCurrentPages(); // 当前页面
										var beforePage = pages[pages.length - 2]; // 前一个页面
										beforePage.onPullDownRefresh();
										//  let s = [];
										// 	 s.push({
										// 		 id:self.id,
										// 		 realname:self.realname,
										// 		 });
										
										// console.log('update address === '+ s.id)
										// beforePage.$vm.address.id=self.id;
										// beforePage.$vm.address.realname = self.realname;
										// beforePage.$vm.address.address_name=self.regionsName;
										// beforePage.$vm.address.address_details=self.address_details;
										// beforePage.$vm.address.address_details= self.address_details; 
										//beforePage.setData({ address:s })
										uni.navigateBack();
										
										
										// if(self.formType == 1){
										// 	//common.jump('return_one', self.optionsParam+'&address_id='+res.data.id);
											
										// 	uni.navigateBack();
										// 	return ;
										// }else{
											
										// 	uni.navigateBack();
										// }
										
										
										//common.jump('return_one', self.optionsParam)
										
									}, 500) 
								}
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					});
			},
			delAddress() {
				var self = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定删除这条收货地址吗',
				    success: function (res) {
				        if (res.confirm) {
				            serve
				            	.request({
				            		url: '/member/address/delete',
				            		data:{
										id:self.id,
									}
				            	})
				            	.then(res => {
									uni.showToast({
										title:res.message,
									});
				            		if(res.code == 200) {
				            			var pages = getCurrentPages(); // 当前页面
				            			var beforePage = pages[pages.length - 2]; // 前一个页面
				            			beforePage.onPullDownRefresh();
										uni.navigateBack();
										
										//self.jump('return_one', self.optionsParam);
				            		} 
				            	});
				        } 
				    }
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			if(options.type) {
				this.optionsParam = 'type='+options.type+'&data='+options.data;
			}
			this.id = options.id;
			this.formType = options.formType || 0;
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.newAddress {
		padding-bottom: 100upx;
        textarea{
			height: 200upx;
			padding: 35upx 30upx;
			box-sizing: border-box;
			border-bottom: 12upx rgba(252,252,253,1) solid;
		}
		.line {
			display: flex;
			box-sizing: border-box;
			padding: 0upx 30upx;
			height: 121upx;
			align-items: center;
			font-size: 32upx;
			border-bottom: 1upx rgba(249, 249, 249, 1) solid;
			.text {
				width: 128upx;
				padding-right: 61upx;
				color:rgba(60,72,104,1);
			}
			.sel {
				background-image: url(http://app.shanhaiyouyu.com/attachment/xcx/icon/icon37.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
				margin-right: 13upx;
			}
			
			.nosel {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 50%;
				margin-right: 13upx;
			}
			input{
				font-weight: bold;
			}
			.region{
				position: relative;
				width: 460upx;
				text-align: right;
				padding-right: 40upx;
			}
			.region::before {
				position: absolute;
				right: 0upx;
				top: 15upx;
				content: '';
				border: 1upx solid rgba(57, 72, 107, 0.5);
				border-width: 0 3upx 3upx 0;
				padding: 8upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}
		
		.bottom-new {
			width: 160upx;
			height: 80upx;
			margin-left:50upx;
			margin-top: 10upx;
			line-height: 80upx;
			border-radius: 50upx;
			display: flex;
			align-items: center;
			color: rgba(255, 255, 255, 1);
			background: #cc0000;
			text{
				width: 100%;
				text-align: center;
				font-size: 32upx;
				font-weight: bold;
			}
		}

		.bottom {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			font-size: 32upx;
			color: rgba(255, 255, 255, 1);
			background: rgba(251, 202, 63, 1);
			bottom: 0upx;
			position: fixed;
		}
	}
</style>
